<template>
  <div class="my-home height100">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('home.lang1')}}</span>
      </div>
    </div>

    <!-- 首页主要信息展示 -->
    <div class="count-info main-show">
          <div class="bg-white main-item" v-for="(item,index) in homeMain" :key="index">
              <div class="main-item-img"> <img :src="item.imgSrc" alt=""></div>
              <div class="main-item-text">
                <div class="main-item-num">
                  {{item.number}}
                  <span v-if="item.tips > 0" style="font-weight: 400;color: #333333;font-size:12px;font-family: PingFangSC-Regular, PingFang SC">(在读:{{item.tips}})</span>
                  </div>
                <div class="main-item-name">{{item.name}}</div>
              </div>
          </div>
    </div>
    <!-- 初始设置 -->
    <div class="count-info content-box pAll16 bg-white mr10" style="margin-top:10px;margin-left:10px">
      <!-- 首页初始化设置 -->
          <div class="conut-briefing">
            <div class="count-title flex-all">
                <div class="set-title">初始设置 <span class="over">已完成 <span class="step">{{ overNum }}/7</span> </span></div>
                <!-- 点击收起 -->
                <el-button @click="put"> {{putClose.text}} <i :class="putClose.icon"></i></el-button>
            </div>
              <!-- 是否显示初始化设置步骤 -->
              <el-row class="homeMain" v-if="putClose.flag">
              <el-col  v-for="(item,index) in initialization" :key="index" style="color: #C1C1C1;">
                <div class="grid-content" @click="setInformation(item,index)" v-if="item.flag">
                  <div class="set-img"> <img src="../../assets/images/home/step-samll.png" alt=""> 
                  <div class="set-img-num" style="color: #F78F0E;">{{index + 1}}</div>
                  </div>
                  <span style="font-size:16px;margin-top:10px;color: #F78F0E;">{{item.name}}</span>
                  <div class="grid-line" v-if="index < 6"></div>
                </div>

                <div class="grid-content" @click="setInformation(item,index)" v-else>
                  <div class="set-img"> <img src="../../assets/images/home/polygon-small.png" alt=""> 
                  <div class="set-img-num">{{index + 1}}</div>
                  </div>
                  <span style="font-size:16px;margin-top:10px;">{{item.name}}</span>
                  <div class="grid-line" v-if="index < 6"></div>
                </div>
                
                <!-- //测试 -->
              </el-col>
            </el-row>
          </div>
    </div>


    <div class="content-box flex1 mr10 mAll10 flex" style="margin-left:10px">
      <div class="home-left" >

        <div class="pAll16 bg-white ">
        <!-- echrts展示区 -->
          <div class="home-attendance-contenior">

            <div class="flex-all mb20 select">
            <p class="fs20 color-333 fwBold"></p>
            <el-select @change="changeAttendance" clearable placeholder="请选择园所" v-model="fliter.value">
              <el-option v-for="item in fliter.schoolList" :key="item.school_id" :label="item.school_cnname" :value="item.school_id"></el-option>
            </el-select>
          </div>

            <!-- 近半年招生情况 -->
            <div id="home-attendance-recruit" class="home-attendance" style="height: 440px;"></div>

          </div>
        </div>

        <div class="pAll16 bg-white" style="margin-top: 10px;">
        <!-- echrts展示区 -->
          
          <div class="home-attendance-contenior">
            <div class="flex-all mb20 select">
            <p class="fs20 color-333 fwBold"></p>
            <el-select @change="showInCome" clearable placeholder="请选择园所" v-model="fliterInCome.value">
               <el-option v-for="item in fliterInCome.schoolList" :key="item.school_id" :label="item.school_cnname" :value="item.school_id"></el-option>
            </el-select>
          </div>
            <div id="home-attendance-revenue" class="home-attendance" style="height: 440px;"></div>
          </div>

        </div>

      </div>

      <div class="home-right ml10 mr10">
        <!-- style="height:615px" -->
        <div class="home-right-item bg-white">
          <!-- 通知 -->
          <div class="home-notice right-item">
            <p class="right-item-title">{{$t('home.lang9')}}</p>
            <!-- <em class="right-item-notice">
              <i class="mh-xx mr8"></i>全部标为已读
            </em>-->
          </div>
          <ul class="right-notice-list">
            <li
              v-for="(item,index) in messageList"
              :key="index"
              class="notice-row"
              @click="handClickMessag(item)"
            >
              <div class="notice-row_lf">
                <em class="notice-tip" :class="{'active':item.is_read=='0'}">
                  <!-- <i class="el-icon-s-comment"></i> -->
                  <img src="../../assets/images/home/tips.png" alt="">
                </em>
                <div class="ellipsis">
                  <div class="tip-text">{{item.notice_title}}</div>
                  <div class="tip-time">{{item.notice_createtime}}</div>
                </div>
              </div>
              <div class="notice-row_rt" style="width:30px"> <i class="el-icon-arrow-right"></i> </div>
            </li>
          </ul>
        </div>

        <!-- 日程组件 -->
        <div class="home-right-item mt10 bg-white">
          <ServiceCenter></ServiceCenter>
        </div>
      </div>
    </div>

    <!-- 通知类消息详情 -->
    <el-drawer
      :title="$t('home.lang10')"
      :visible.sync="showReplyMemessage"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box ReplyMemessage"
      :before-close="handleClose"
    >
      <!-- 返回按钮 -->
      <div class="btn-back" @click="showReplyMemessage=false;">
        <i class="mh-arrow_left"></i>
      </div>
      <div class="slider-content pAll20">
        <p class="tit fs18 tc">{{messageDetail.notice_title}}</p>
        <div class="small-tit tc fs12">
          <span class="color-aaa">{{$t('home.lang11')}}</span>
          <span class="color-666 mr15">{{messageDetail.notice_createtime}}</span>
          <span class="color-aaa">{{$t('home.lang12')}}</span>
          <span class="color-666">{{messageDetail.staffer_cnname}}</span>
        </div>
        <div class="message-content">
          <p v-html="messageDetail.notice_connet"></p>
           <a
            target="_blank"
            download
            class="download_files"
            :href="item.url"
            v-show="messageDetail.notice_filelist"
            v-for="(item, index) in messageDetail.notice_filelist"
            :key="index"
          >
            {{item.name}}
            <br />
          </a>
        </div>
      </div>
    </el-drawer>

    <!-- 弹出框 -->
    <div class="message-box" v-if="test">
      <div class="message-main">
        <div class="title">
              <div class="title-left">{{initialization[chickNum].name}}</div>
              <div class="success">
              <div class="percentage-box"><el-progress class="percentage" :percentage="progressNum.percentage"></el-progress></div>
              <span style="letter-spacing: 1px;">已完成</span><span style="color:#F78F0E;letter-spacing: 1px;cursor: pointer;">{{progressNum.successed}}/{{progressNum.total}}</span></div>
              <div class="close" @click="test = !test"><i class="el-icon-close"></i></div>
        </div>
        <div class="content">
            <div class="content-item" v-for="(item , index) in initialization[chickNum].table.items" :key="index">
              <div class="content-item-text">{{ item.items }}</div>
              <div class="is-success" v-if="!item.status">
                <!-- <span>去设置<i class="el-icon-caret-right"></i></span>+ -->
                <router-link :to="item.router" >去设置<i class="el-icon-caret-right"></i></router-link>
                <!-- <router-link :to="item.router">去设置<i class="el-icon-caret-right"></i></router-link> -->
              </div>
              <div class="is-success" v-else>
                <router-link :to="item.router">已完成</router-link>
                <!-- style="border: 1px solid #32CC71;color:#32CC71;padding:2px" -->
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
// import Calendar from "@/components/Calendar/Calendar.vue";
import ServiceCenter from "@/components/ServiceCenter/ServiceCenter.vue";
import apiHttp from "./home";
import headerHttp from '@/components/common/Header/headerHttp'
export default {
  name: "index",
  components: {
    // echarts,
    // Calendar,
    ServiceCenter,
  },
  data() {
    return {
      showReplyMemessage: false, //通知类消息详情
      notice_id: "", //通知 id
      messageDetail: {}, //消息详情
      messageList: [], //消息列表

      fliter: {
        schoolList:[],
        value:''
      },
      fliterInCome:{
        schoolList:[],
        value:''
      },
      countInfo: [], //统计信息
      XchartData: [], //x轴数据
      //园所详细数据
      homeMain:[
        {imgSrc:require("../../assets/images/home/home-small.png"),number:'0',name:'在开园所(所)',tips:'0'},
        {imgSrc:require("../../assets/images/home/entrance-small.png"),number:'0',name:'在籍幼儿(人)',tips:'0'},
        {imgSrc:require("../../assets/images/home/signup-small.png"),number:'0',name:'待入班幼儿(人)',tips:'0'},
        {imgSrc:require("../../assets/images/home/openClass-small.png"),number:'0',name:'在开班级(个)',tips:'0'},
        {imgSrc:require("../../assets/images/home/love-small.png"),number:'0',name:'在开兴趣班(个)',tips:'0'},
        {imgSrc:require("../../assets/images/home/workers-samll.png"),number:'0',name:'职工人数(人)',tips:'0'},
      ],
      //收起与展开
      putClose:{
        flag:true,
        text:'收起',
        icon:'el-icon-arrow-down'
      },
      //初始化设置
      initialization:[
        {name:'园所设置',flag:false,
        table:{
          items:[
            {items:'企业主体信息设置',status:false,router:'/Set/groupSettings/companyInfor'},
            {items:'区域设置',status:false,router:'/Company/gardenSchool'},
            {items:'添加园所',status:false,router:'/Company/gardenSchool'},
          ],
          }
        },
        {name:'组织框架设置',flag:false,
        table:{
          items:[
            {items:'暂无信息',status:false},
            {items:'暂无信息',status:false},
            {items:'暂无信息',status:false},
          ],
          }
        },
        {name:'职工设置',flag:false,
        table:{
          items:[
            {items:'集团角色设置',status:false,router:'/Set/personnelSet/grouproleManage'},
            {items:'园务角色设置',status:false,router:'/Set/personnelSet/schoolroleManage'},
            {items:'集团职务类别设置',status:false,router:'/Set/personnelSet/groupPostManage'},
            {items:'园务职务类别设置',status:false,router:'/Set/personnelSet/campusPostManage'},
            {items:'教师类别设置',status:false,router:'/Set/personnelSet/teacherType'},
            {items:'职工信息维护',status:false,router:'/Company/staffManage'},
          ],
          }
        },

        {name:'园务相关设置',flag:false,
        table:{
          items:[
            {items:'幼儿异动原因管理',status:false,router:'/Set/gradenSet/childChange'},
            {items:'节假日管理',status:false,router:'/Set/gradenSet/holidayManage'},
            {items:'学生类型设置',status:false,router:'/Set/gradenSet/studentTypeSetting'},
            {items:'菜肴管理',status:false,router:'/Set/gradenSet/nutrition'},
          ],
          }
        },

        {name:'财务相关设置',flag:false,
        table:{
          items:[
            {items:'兴趣班设置',status:false,router:'/Set/gradenSet/interestClass'},
            {items:'收费项目设置',status:false,router:'/Set/gradenSet/chargeItemSetting'},
          ],
          }
        },

        {name:'招生相关设置',flag:false,
        table:{
          items:[
            {items:'招生渠道类型设置',status:false,router:'/Client/channelManage'},
            {items:'招生渠道明细设置',status:false,router:'/Client/channelManage'},
            {items:'沟通方式',status:false,router:'Set/enrollStudentSet/commuType'},
            {items:'沟通模版',status:false,router:'/Set/enrollStudentSet/commuModal'},
            {items:'取消柜询/试听原因',status:false,router:'/Set/gradenSet/ReasonForTrial'},
          ],
          }
        },

        {name:'其他参数设置',flag:false,
        table:{
          items:[
            {items:'消息类型设置',status:false,router:'/Set/groupSettings/messageType'},
            {items:'集团产品设置',status:false,router:'/Set/groupSettings/businessProducts'},
          ],
          }
        },
      ],
      test:false,
      chickNum:0,
      overNum:0,
      progressNum:{successed:0,total:0,percentage:0},
      //第一个表格的数据
      chartsDataRecruit: [
      ],
      //第二个表格的数据
      chartsDataRevenue: [ 
      ],
      getEchartsId:{company_id: this.$store.state.COMPANY_ID}
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getNotificationApi(); // 集团消息->获取个人消息列表--zjb
    this.getHomeNumberApi() //获取首页基本数字
    this.crmStudentApi(this.getEchartsId)  //获取Echarts1数据
    this.financeApi(this.getEchartsId)     //获取Echarts2数据
    this.getAllSchoolApi()  // 所有园所
  },
  methods: {
    //首页基础信息
    getHomeNumberApi(){
      apiHttp
        .getHomeNumberApi({company_id: this.$store.state.COMPANY_ID})
        .then(res => {
          this.judgeStatus(res.data.result)
          let arr = []
          for(let i in res.data.result.num){
            arr.push(res.data.result.num[i])
          }
          for(let i = 0; i < arr.length; i++) {
            this.homeMain[i].number = arr[i]
            if(i == 3){
              this.homeMain[i].number = arr[4].classnum 
              this.homeMain[i].tips = arr[4].stunum 
              }
              else if(i == 4){
                this.homeMain[i].number = arr[5].hobbynum 
                this.homeMain[i].tips = arr[5].hobbystunum 
              }
              else if(i == 5){
                this.homeMain[i].number = arr[3]
                this.homeMain[i].tips = '0'
              }
          }
          //判断组织框架设置是否为为TRUE
          if(res.data.result.orset.orgnum > 0) {
            this.initialization[1].flag = true
            this.initialization[1].table.items.forEach( (v) =>{
              v.status = true
            })
          }
          this.showStatus()
        })
    },
    //初始化设置
    setInformation(value,index){
      if(index == 1 ){
        this.test = true
        this.$router.push('/Company/orgmanage')
      }
      this.test = !this.test
      this.chickNum = index
      this.progress(value)
    },
    //判断是否完成
    judgeStatus(data){
      //园所设置
        Object.values(data.scset).map((v,i) =>{
          if(v > 0) {
            this.initialization[0].table.items[i].status = true
          }
          else this.initialization[0].table.items[i].status = false
        })
      //组织框架设置暂无UI图
      //跳转到的页面----->查看点击初始化设置(setInformation)
        Object.values(data.orset).map((v) =>{
          if(v > 0) this.initialization[1].flag = true
          if(v < 0) this.initialization[1].flag = false
        })
      //职工设置
        Object.values(data.staset).map((v,i) =>{
          if(v > 0) {
            this.initialization[2].table.items[i].status = true
          }
          else this.initialization[2].table.items[i].status = false
        })
      //园务相关设置
        Object.values(data.stuset).map((v,i) =>{
          if(v > 0) {
            this.initialization[3].table.items[i].status = true
          }
          else this.initialization[3].table.items[i].status = false
        })
      //财务相关设置
        Object.values(data.feeset).map((v,i) =>{
          if(v > 0) {
            this.initialization[4].table.items[i].status = true
          }
          else this.initialization[4].table.items[i].status = false
        })

      //招生相关设置
        Object.values(data.crmset).map((v,i) =>{
          if(v > 0) {
            this.initialization[5].table.items[i].status = true
          }
          else this.initialization[5].table.items[i].status = false
        })
      //招生相关设置
        Object.values(data.othset).map((v,i) =>{
          if(v > 0) {
            this.initialization[6].table.items[i].status = true
          }
          else this.initialization[6].table.items[i].status = false
        })
    },
    //显示是否完成
    showStatus(){
      let number = 0
      let flagResultArr = []
      console.log(this.initialization);
      this.initialization.forEach((v,index) =>{
        let item = v.table.items.every(element => {
          return element.status == true
        })
        flagResultArr.push(item)
        this.initialization[index].flag = flagResultArr[index]
         if(v.flag) number++
        console.log(item);
      })
      this.overNum = number
    },
    //进度显示
    progress(value){
      let number = 0
      value.table.items.forEach((v)=>{
        if(v.status) {
          number += 1;
        }
      })
      console.log(number,123456);
      this.progressNum.successed = number
      this.progressNum.total = value.table.items.length
      this.progressNum.percentage = (number / value.table.items.length).toFixed(2) * 100
    },
     // 所有 园所
    getAllSchoolApi() {
      this.$http.getAllSchoolApi({}).then((res) => {
        const { error, result } = res.data;
        if (error == 0) {
          console.log(res);
          this.fliter.schoolList = result.list;
          this.fliterInCome.schoolList = result.list;
        } else {
          this.fliter.schoolList = [];
        }
      });
    }, 
    //获取echarts1信息
    crmStudentApi(params){
     apiHttp
    //  localStorage.member.company_id
        .crmStudentApi(
          // company_id: this.$store.state.COMPANY_ID,
          params
          )
        .then(res => {
          console.log(res , 1998);
          let data = []
          let arrData = []
          let mouthData = []
          let name = ['有效名单','试听学员','预报名学员']
          for(let item in res.data.result){
            let arr = []
            res.data.result[item].forEach( value  =>{
                arr.push(value.num)
              })
            arrData.push(arr)
          }
          for(let i = 0; i< Object.keys(res.data.result).length; i++){
              data.push({
                name: name[i],
                type: 'bar',
                barGap: 0,
                // label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: arrData[i],
              })
          }

          res.data.result.stuAff.forEach(element => {
            mouthData.push(element.month)
          });
          this.$nextTick(() => {
            this.canvasWidth();
            this.trendDrawLine("home-attendance-recruit", "近半年招生概况",data,mouthData,name,['#39A1FF ','#2CD19A', '#FBA234']);
          });
        })
    },
    //获取echarts2数据
    financeApi(params){
      apiHttp
        .financeApi(params)
        .then(res => {
          console.log(res , 2);
          let data = []
          let arrData = []
          let mouthData = []
          let name = ['收入','收费']
          for(let item in res.data.result){
            let arr = []
            res.data.result[item].forEach( value  =>{
                arr.push(value.price)
              })
            arrData.push(arr)
          }
          for(let i = 0; i< Object.keys(res.data.result).length; i++){
              data.push({
                name: name[i],
                type: 'bar',
                barGap: 0,
                // label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: arrData[i],
              })
          }

          res.data.result.income.forEach(element => {
            mouthData.push(element.month)
          });
           this.$nextTick(() => {
            this.canvasWidth();
            this.trendDrawLine("home-attendance-revenue", "近半年月收入收费概况",data,mouthData,name,['#39A1FF ','#27C9EE']);
          });
        })
        
    },
    // 集团消息->获取个人消息列表--zjb
    getNotificationApi() {
      apiHttp.getNotificationApi({}).then(res => {
        if (res.data.error == "0") {
          this.messageList = res.data.result.list;
        } else {
          this.messageList = [];
        }
      });
    },
    //集团消息->获取单个消息信息--zjb
    getNewsOneInfoApi(val) {
      apiHttp
        .getNewsOneInfoApi({
          notice_id: this.notice_id
        })
        .then(res => {
          if (res.data.error == "0") {
            this.messageDetail = res.data.result.list;

          } else {
            this.messageDetail = {};
          }
          if (val.is_read == "0") {
            this.modifyNoticeReadAction(); // 集团消息->修改阅读状态--zjb
          }
          this.showReplyMemessage = true;
        });
    },
    // 集团消息->修改阅读状态--zjb
    modifyNoticeReadAction() {
      apiHttp
        .modifyNoticeReadAction({
          notice_id: this.notice_id
        })
        .then(res => {
          if (res.data.error == "0") {
            this.$Tool.setStorage("messageNumber", res.data.result.list);
            this.$store.dispatch("setMessageNumber",res.data.result.list);
            this.getNotificationApi(); // 集团消息->获取个人消息列表--zjb
          }
        });
    },
    // 查看近半年招生情况
    changeAttendance() { 
      console.log('查询的学校ID为:',this.fliter.value);
      let params = {school_id:this.fliter.value}
      this.crmStudentApi(params)
    },
    //查看近半年收入
    showInCome(){
      console.log('查询的学校ID为:',this.fliterInCome.value);

      let params = {company_id:this.fliterInCome.value} 
      // let params = new Object()
      // params.school_id = this.fliterInCome.value
      this.financeApi(params)
    },
    // 查看消息详情
    handClickMessag(val) {
      this.notice_id = val.notice_id;
      this.getNewsOneInfoApi(val); //集团消息->获取单个消息信息--zjb
    },
    canvasWidth() {
      //canvas赋初始值
      let _canvaswidth = document.querySelector(".home-attendance").offsetWidth;
      document.querySelector(".home-attendance").style.width =
        _canvaswidth + "px";
    },
    trendDrawLine(id,title,data,mouthData,name,color) {
        // var app = {};
        var myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
          color: color,
            title:{
              text:title,
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              x:'left',      //可设定图例在左、右、居中
              top:'15%',
              data: name
            },
            grid:{
              top:'30%',
              containLabel:true
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: mouthData
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: data
        });
    },
    //收起与展开
    put(){
      if(this.putClose.flag){
        this.putClose.flag = !this.putClose.flag
        this.putClose.text = '展开'
        this.putClose.icon = "el-icon-arrow-up"
      }else{
        this.putClose.flag = !this.putClose.flag
        this.putClose.text = '收起'
        this.putClose.icon = "el-icon-arrow-down"
      }
    },
    handleClose(done) {
      done();
    },
  },
  mounted() {}
};
</script>
<style lang="less">
.my-home {
  .home-left {
    flex: 1;
    .home-attendance-contenior{
      z-index: 9;
      position: relative;
      .select{
        position: absolute;
        top: 40px;
        right: 20px;
        z-index: 99;
      }
    }
  }
  .home-right {
    width: 384px;
  }
  .homeMain{
    display: flex;
    height: 160px;
    align-items: center;
  }
  .main-show{
    margin-top:10px;
    display: flex; 
    justify-content: space-around;
    .main-item{
      flex: 1;
      height: 114px;
      background-color: white;
      border-radius: 4px;
      display: flex;
      margin-left: 10px;
      .main-item-img{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .main-item-text{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content:center;
        .main-item-num{
          font-size: 28px;
          font-family: DIN-Bold, DIN;
          font-weight: bold;
          color: #333333;
          line-height: 34px;
        }
        .main-item-name{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909699;
          line-height: 20px;
        }
      }
      
    }
  }
  .grid-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    .set-img{
      position: relative;
      .set-img-num{
        width: 100%;
        height: 100%;
        line-height: 72px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }
    .grid-line{
      width: 160px;
      height: 1px;
      background-color:#DCDFE6;
      position: absolute;
      top: 40%;
      left: 66%;
    }
  }
}

// 主页 右侧
.home-right-item {
  padding: 20px 15px;
  .right-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right-item-notice {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      font-style: normal;
      color: rgba(170, 170, 170, 1);
      line-height: 17px;
      i:before {
        color: #cccccc;
      }
    }
    // .right-item-schedule {
    //   display: flex;
    //   align-items: center;
    //   font-size: 14px;
    //   font-weight: 400;
    //   font-style: normal;
    //   color: rgba(14, 168, 247, 1);
    //   line-height: 20px;
    //   cursor: pointer;
    //   i {
    //     margin-right: 5px;
    //     font-style: 20px;
    //     font-weight: bold;
    //     border-radius: 10px;
    //     color:rgba(14,168,247,1);
    //   }
    // }
    .right-item-title {
      font-size: 23px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 32px;
    }
  }

  // 通知 列表
  .right-notice-list {
    padding-top: 24px;
    max-height: 500px;
    overflow-y: auto;
    .notice-row {
      display: flex;
      margin-bottom: 24px;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      &:last-child {
        margin-bottom: 0;
      }
      .notice-row_lf {
        display: flex;
        align-items: center;
        .notice-tip {
          width: 45px;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(245, 245, 250, 1);
          border-radius: 50%;
          opacity: 1;
          position: relative;
          i:before {
            color: #cccccc;
          }
          &.active {
            background: rgba(255, 170, 2, 0.15);
            &::before {
              content: "";
              position: absolute;
              right: 5px;
              top: 5px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background-color: #ff1010;
            }
            i:before {
              color: #ffaa02;
            }
          }
        }
        .ellipsis{
          .tip-text{
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
          }
          .tip-time{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #707377;
            line-height: 17px;
          }
        }
        p {
          width: 200px;
          flex: 1;
          padding-left: 10px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
        }
      }

    }
    .notice-row_rt {
      width: 80px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(170, 170, 170, 1);
      line-height: 17px;
    }
  }
}
.set-title{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
    .over{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #707377;
      line-height: 20px;
    }
    .step{
      color:#FBA234;
    }
}
.message-box{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 90;
  .message-main{
    width: 500px;
    min-height: 175px;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 50px;
      padding: 20px ;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #DDDDDD;
      .title-left{
        flex: 1;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        letter-spacing: 2px;
      }
      .percentage-box{
        flex: 1;
        height: 30px;
        line-height: 30px;
        position: relative;
        .percentage{
          width: 138px;
          position: absolute;
          top: 7px;
          right: 0;
        }
      }
      .success{
        display: flex;
        // flex: 1;
        width: 222px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #707377;
       justify-content: right;
      }
      .close{
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: right;
      }
    }
    .content{
      .content-item{
        display: flex;
        padding: 20px;
        .content-item-text{
          width: 80%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 500;
          color: #333333;
          letter-spacing: 1px;
        }
        .is-success{
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #F78F0E;
          letter-spacing: 1px;
          cursor: pointer;
          a{
          color: #F78F0E;
          }
        }
      }
    }
  }
}
</style>
